<!-- ‘K手’ 指定时间-->
<template>
 <!-- <ele-modal
    class="el-model"
    width="685px"
    :visible="visible"
    title="采集时间"
    custom-class="demo-file-sort-dialog"
    @close="updateVisible(false)"
  >
  </ele-modal>-->
  <el-drawer
    title="采集时间段"
    :append-to-body="true"
    :before-close="handleClose"
    :visible.sync="visible">
    <div class="flex-wrap">
      <div v-for="(i,j) in dayData" :key="j" @click="ksTimeClick(i,j)">
        <div :class="i.indexOf(':')==-1 ? 'font-cls' : selected.indexOf(i)!=-1 ? 'sel-bj flex' : 'bj-cls flex'">{{i}}</div>
      </div>
    </div>
<!--    <div class="d-fixed">-->
      <div class="btn-class flex">
        <el-button @click="updateVisible(false)">取消</el-button>
        <el-button type="primary" @click="confirm()">确定</el-button>
      </div>
<!--    </div>-->
  </el-drawer>

</template>

<script>
  export default {
    name: "time-modal",
    props: {
      tomorrow: String,
      oldList:Array,
      list:Array
    },
    data() {
      return {
        oldTwoList:[],
        // 弹窗是否打开
        visible: false,
        selected: [],//选中的服务项目名称
        timeTitle:'',
        dayData : [
          '凌晨','00:00-00:30','00:30-01:00','01:00-01:30','01:30-02:00','02:00-02:30','02:30-03:00','03:00-03:30','03:30-04:00',
          '上午','06:00-06:30','06:30-07:00','07:00-07:30','07:30-08:00','08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00-10:30','10:30-11:00','11:00-11:30',
          '11:30-12:00',
          '下午','12:00-12:30','12:30-13:00','13:00-13:30','13:30-14:00','14:00-14:30','14:30-15:00','15:00-15:30','15:30-16:00',
          '16:00-16:30','16:30-17:00','17:00-17:30','17:30-18:00',
          '晚上','18:00-18:30','18:30-19:00','19:00-19:30','19:30-20:00',
          '20:00-20:30','20:30-21:00','21:00-21:30','21:30-22:00','22:00-22:30','22:30-23:00','23:00-23:30','23:30-24:00'],
      }
    },
    created(){
      //假如是2017-10-22
      /*var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      var str=this.tomorrow.match(reg)
      console.log('str[1]+\'年\'+',str,'this.tomorrow',this.tomorrow)
      let date=RegExp.$1 +'年'+RegExp.$2+'月'+RegExp.$3+'日'
    this.timeTitle='指定时间：'+ date*/
    },
    methods:{
      handleClose(done) {
        done();
        /*this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});*/
      },
      show(){
        this.oldTwoList=JSON.parse(JSON.stringify(this.oldList))
        console.log('this.oldTwoList',this.oldTwoList)
        if(this.oldTwoList.length>0){
          this.selected=this.oldTwoList
        }
        this.updateVisible(true)
      },
      // 确定采集时间段
      confirm(){
        //不限制采集时间段
        /*if(this.selected.length>3){
          this.$message.error('最多选择3个采集时间段！')
          return
        }*/
       /* let selected=JSON.Parse(JSON.stringify(this.selected))
        this.$emit('timeClick',selected) // toString 转字符串*/
        this.$emit('timeClick',this.selected) // toString 转字符串
        this.updateVisible(false)
      },
      updateVisible(value){
        this.visible=value
        if(value==false){
          this.selected=[]
        }
      },
      ksTimeClick(day,dayIndex){
        console.log("day------",day)
        if(day.indexOf(':')!=-1){
          if (this.selected.indexOf(day) !== -1) {
            this.selected.splice(this.selected.indexOf(day), 1); //取消
          } else {
            this.selected.push(day);//选中添加到数组里
          }
          console.log("selected",this.selected)
        }
      }
    }
  }
</script>

<style scoped lang="less">
  div{
    color: #000;
  }
  .font-cls{
    width: 700px;
    margin: 30px 25px 0;
  }
  .bj-cls, .sel-bj{
    border: 1px solid #F7F7F7;
    background: #F7F7F7;
    color: #A1A1A1;
    width: 100px;
    height: 26px;
    margin:18px 0px 0px 33px;
  }
  .sel-bj{
    color: #1E6CEB;
    background: #DDF0FF;
    border: 1px solid #1E6CEB;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .d-fixed{
    position: fixed;
    bottom: 0px;  }

  .btn-class{
      width: 100%;
      background-color: #FFFFFF;
      button{
        width: 100px;
        margin:50px 20px 20px;
      }
    }
</style>
